// 在图片上添加水印, 左上角日期,底部地址,经纬度.

import dayjs from 'dayjs';

function waterMark({
	imgUrl,
	adress,
	x,
	y,
}: {
	imgUrl: string;
	adress: string;
	x: number;
	y: number;
}): Promise<string> {
	return new Promise(resolve => {
		// 在base64图片的右下角添加水印,并且生成新的图片链接
		const canvas = document.createElement('canvas');
		const ctx = canvas.getContext('2d')!;
		const img = new Image();
		img.src = imgUrl;

		img.onload = () => {
			console.log(img.width, img.height, 'img13123');
			canvas.width = img.width;
			canvas.height = img.height;
			ctx.drawImage(img, 0, 0, img.width, img.height);
			// 顶部添加黑色透明度为0.5的蒙层
			ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
			ctx.fillRect(0, 0, img.width, 30);
			// 底部添加黑色透明度为0.5的蒙层
			ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
			ctx.fillRect(0, img.height - 48, img.width, 48);
			// 右下角
			const text = adress;
			const textWidth = ctx.measureText(text).width;
			ctx.font = '12px Arial';
			ctx.fillStyle = '#fff';
			ctx.textAlign = 'right';
			ctx.textBaseline = 'bottom';
			console.log(img.width - textWidth - 10);
			ctx.fillText(text, img.width - 10, img.height - 28);

			const text3 = `经度: ${x}  纬度: ${y}`;
			ctx.textAlign = 'right';
			ctx.fillStyle = '#fff';
			ctx.textBaseline = 'bottom';
			ctx.fillText(text3, img.width - 10, img.height - 8);
			// 左上角
			ctx.fillStyle = '#fff';
			ctx.textAlign = 'left';
			const date = new Date();
			const text2 = dayjs(date).format('YYYY-MM-DD HH:mm:ss');
			ctx.fillText(text2, 10, 20);
			console.log(ctx, 'ctx');
			ctx.save();
			resolve(canvas.toDataURL());
		};
	});
}
export default waterMark;
